<script setup>
definePageMeta({ layout: "admin" });

import * as echarts from "echarts";

onMounted(async () => {
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 0, name: "正常" },
          { value: 0, name: "禁止" },
        ],
      },
    ],
  };

  $api("/getAddress").then((res) => {
    console.log(res);
    let ZCount = 0;
    let FCount = 0;
    for (let i = 0; i < res.length; i++) {
      if (res[i].flag == "0") {
        FCount++;
      } else {
        ZCount++;
      }
    }
    console.log(ZCount, FCount);
    option.series[0].data[0].value = ZCount;
    option.series[0].data[1].value = FCount;
    option && myChart.setOption(option);
  });
});
</script>

<template>
  <AdminContainer>
    <template #header> </template>
    <div>
      <div id="main" style="width: 500px; height: 500px"></div>
    </div>
    <template #footer> </template>
  </AdminContainer>
</template>
